<template>
	<z-paging-swiper class="page">
		<z-tabs ref="tabs" :list="tabsList" scroll-count="1" :current="currentIndex" name-key="label"
			@change="changeTab" value-key="id" :active-style="{
				'font-size': '30rpx',
				'font-weight': 'bold',
				color: '#333333'
			}" :inactive-style="{ 'font-size': '30rpx', color: '#666666' }" />
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" :current="currentIndex" @change="onChange">
			<swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
				<order-list-item ref="listItemRefs" :tabIndex="index" :currentIndex="currentIndex"
					:currentId="currentId" :currentValue="item.value"></order-list-item>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
	import orderListItem from "@/pages/order/consumerOrder/orderListItem.vue";
	import {
		ref,
		reactive,
		toRefs,
		nextTick
	} from "vue";
	import {
		onShow,
		onUnload
	}
	from '@dcloudio/uni-app';
	// 响应式数据
	const tabs = ref(null);
	// 创建数组引用，用于存储所有子组件实例
	const listItemRefs = ref([]);
	const state = reactive({
		// tabsList: ["全部订单", "待付款", "待服务", "待评价", "退款/售后"],
		tabsList: [{
				label: "全部订单",
				value: ""
			},
			{
				label: "待付款",
				value: "ORDER_WAIT_PAYMENT"
			},
			{
				label: "待服务",
				value: "ORDER_WAIT_SERVICE"
			},
			{
				label: "待评价",
				value: "ORDER_WAIT_EVALUATED"
			},
			{
				label: "退款/售后",
				value: "ORDER_WAIT_AFTER_SALES"
			}
		],
		currentIndex: 0,
		currentId: 1
	});
	const {
		tabsList,
		currentIndex,
		currentId
	} = toRefs(state);
	const changeTab = async (index, id) => {
		console.log(index, id, "index, id");
		currentIndex.value = index;
		currentId.value = id;

		// 等待DOM更新
		await nextTick();

		// 触发当前选中tab对应子组件的刷新
		if (listItemRefs.value[index] && listItemRefs.value[index].reload) {
			listItemRefs.value[index].reload();
		}
	};

	const onChange = (e) => {
		console.log(e, "e");
		currentIndex.value = e.detail.current;
	};
	onShow(() => {
	  // 监听评价完成事件
	  uni.$on('refreshOrderList', () => {
	    if (listItemRefs.value && listItemRefs.value[state.currentIndex]) {
	      listItemRefs.value[state.currentIndex].reload();
	    }
	  });
	  // uni.$on('orderStatusUpdated', () => {
	  //   if (listItemRefs.value && listItemRefs.value[state.currentIndex]) {
	  //     listItemRefs.value[state.currentIndex].reload();
	  //   }
	  // });
	});
	// 在 onUnload 中移除监听
	onUnload(() => {
	  uni.$off('refreshOrderList');
	  // uni.$off('orderStatusUpdated');
	});
</script>

<style lang="scss" scoped>
	.page {
		.swiper {
			height: 100%;
			background-color: #f5f5f5;
		}
	}

	// ::v-deep .z-tabs-item {
	//   padding: 0 !important;
	// }
</style>